<template>
  <div class="all">
    <!--header 标签  -->
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="" />
        <span style="color: #1da4f2">返回</span>
      </div>
      <div class="div">
        <h>体重相关数据记录</h>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <!--手工输入 设备采集  -->
    <div class="top">
      <div
        class="top-left"
        :class="tabIndex == 0 ? 'selectTab' : ''"
        @click="clickTabBar(0)"
      >
        <div class="top-1">
          <img
            v-show="tabIndex == 0"
            src="../../../assets/shougongshuru-xuanzhong.png"
            alt=""
            class="ti_icon"
          />
          <img
            v-show="tabIndex == 1"
            src="../../../assets/shougongshuru-weixuanzhong.png"
            alt=""
            class="ti_icon"
          />
        </div>
        <div class="top-2">手工输入</div>
      </div>
      <div
        class="top-right"
        :class="tabIndex == 1 ? 'selectTab' : ''"
        @click="clickTabBar(1)"
      >
        <div class="top-1">
           <div v-show="tabIndex == 1" class="weixuanze2"></div>
          <img
            v-show="tabIndex == 0"
            src="../../../assets/shebeicaiji-weixuanzhong.png"
            alt=""
            class="ti_icon"
          />
          <img
            v-show="tabIndex == 1"
            src="../../../assets/shebeicaiji-xuanzhong.png"
            alt=""
            class="ti_icon"
          />
          <div v-show="tabIndex == 1" class="weixuanze">未选择</div>
        </div>
        <div class="top-2">设备采集</div>
      </div>
    </div>

    <!-- 手工输入 main主体 -->
    <div class="main" v-show="tabIndex == 0">
      <!--测量时状态和时间  -->
      <van-field
        @click="statePicker = true"
        style="margin-top: 8px"
        is-link
        arrow-direction="down"
        v-model="choose_state"
        type="text"
        readonly
        placeholder="请选择测量时状态"
        label="测量时状态"
        input-align="right"
      />
      <van-popup v-model="statePicker" round position="bottom">
        <van-picker
          show-toolbar
          title="测量时状态"
          :columns="stateColumns"
          @cancel="statePicker = false"
          @confirm="stateOnConfirm"
        />
      </van-popup>
      <van-field
        @click="isEdit ? (datePicker = true) : ''"
        type="text"
        is-link
        arrow-direction="down"
        readonly
        v-model="time"
        placeholder="请选择测量时间"
        label="测量时间"
        input-align="right"
      />
      <van-popup v-model="datePicker" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @cancel="datePicker = false"
          @confirm="dateOnConfirm"
        />
      </van-popup>

      <!--BMI信息  -->
      <!-- @input限制输入的数字最大值 -->
      <van-field
        type="text"
        maxlength="5"
        style="margin-top: 8px"
        v-model="height"
        placeholder="请输入身高"
        label="身高"
        input-align="right"
        @input="height = Number(height) < 250 ? height : height.slice(0, -1)"
      >
        <template #right-icon> cm </template>
      </van-field>
      <van-field
        type="text"
        maxlength="6"
        v-model="weight"
        placeholder="请输入体重"
        label="体重"
        input-align="right"
        @input="weight = Number(weight) < 200 ? weight : weight.slice(0, -1)"
      >
        <template #right-icon> kg </template>
      </van-field>
      <van-field
        type="text"
        v-model="bmi"
        readonly
        label="BMI"
        input-align="right"
      />

      <!-- 体脂率等信息 -->
      <van-field
        type="text"
        maxlength="5"
        style="margin-top: 8px"
        v-model="tizhilv"
        placeholder="请输入体脂率"
        label="体脂率"
        input-align="right"
        @input="
          tizhilv = Number(tizhilv) < 100 ? tizhilv : tizhilv.slice(0, -1)
        "
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="jiroulv"
        placeholder="请输入肌肉率"
        @input="
          jiroulv = Number(jiroulv) < 100 ? jiroulv : jiroulv.slice(0, -1)
        "
        label="肌肉率"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="shuifen"
        placeholder="请输入身体水分"
        @input="
          shuifen = Number(shuifen) < 100 ? shuifen : shuifen.slice(0, -1)
        "
        label="身体水分"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="danbaizhi"
        placeholder="请输入蛋白质含量"
        @input="
          danbaizhi =
            Number(danbaizhi) < 100 ? danbaizhi : danbaizhi.slice(0, -1)
        "
        label="蛋白质含量"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="zhifang"
        placeholder="请输入内脏脂肪等级(1.2.3...)"
        @input="
          zhifang = Number(zhifang) < 100 ? zhifang : zhifang.slice(0, -1)
        "
        label="内脏脂肪等级"
        input-align="right"
      >
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="guyanliang"
        placeholder="请输入骨盐量"
        @input="
          guyanliang =
            Number(guyanliang) < 100 ? guyanliang : guyanliang.slice(0, -1)
        "
        label="骨盐量"
        input-align="right"
      >
        <template #right-icon> kg </template>
      </van-field>
      <!-- 占位符 -->
      <div style="height:200px;">

      </div>
    </div>

    <!--手工输入 bottom 底部按钮  -->
      <div class="bottom" v-show="tabIndex == 0" @click="save()">
        <button @click="">保存</button>
      </div>

    <!-- 设备采集 main主体 -->
    <div class="main" v-show="tabIndex == 1">
      <!--测量时状态和时间  -->
      <van-field
        @click="statePicker = true"
        style="margin-top: 8px"
        is-link
        arrow-direction="down"
        v-model="choose_state"
        type="text"
        readonly
        placeholder="请选择测量时状态"
        label="测量时状态"
        input-align="right"
      />
      <van-popup v-model="statePicker" round position="bottom">
        <van-picker
          show-toolbar
          title="测量时状态"
          :columns="stateColumns"
          @cancel="statePicker = false"
          @confirm="stateOnConfirm"
        />
      </van-popup>
      <van-field
        @click="isEdit ? (datePicker = true) : ''"
        type="text"
        is-link
        arrow-direction="down"
        readonly
        v-model="time"
        placeholder="请选择测量时间"
        label="测量时间"
        input-align="right"
      />
      <van-popup v-model="datePicker" round position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @cancel="datePicker = false"
          @confirm="dateOnConfirm"
        />
      </van-popup>

      <!--BMI信息  -->
      <van-field
        type="text"
        maxlength="5"
        style="margin-top: 8px"
        v-model="height"
        placeholder="请输入身高"
        label="身高"
        input-align="right"
        @input="height = Number(height) > 250 ? height : 0"
      >
        <template #right-icon> cm </template>
      </van-field>
      <van-field
        type="text"
        maxlength="6"
        v-model="weight"
        placeholder="--"
        @input="inputHandler"
        label="体重"
        input-align="right"
      >
        <template #right-icon> kg </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="bmi"
        readonly
        label="BMI"
        input-align="right"
      />

      <!-- 体脂率等信息 -->
      <van-field
        type="text"
        maxlength="5"
        style="margin-top: 8px"
        v-model="tizhilv"
        placeholder="--"
        @input="inputHandler"
        label="体脂率"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="jiroulv"
        placeholder="--"
        @input="inputHandler"
        label="肌肉率"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="shuifen"
        placeholder="--"
        @input="inputHandler"
        label="身体水分"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="danbaizhi"
        placeholder="--"
        @input="inputHandler"
        label="蛋白质含量"
        input-align="right"
      >
        <template #right-icon> % </template>
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="zhifang"
        placeholder="--"
        @input="inputHandler"
        label="内脏脂肪等级"
        input-align="right"
      >
      </van-field>
      <van-field
        type="text"
        maxlength="5"
        v-model="guyanliang"
        placeholder="--"
        @input="inputHandler"
        label="骨盐量"
        input-align="right"
      >
        <template #right-icon> kg </template>
      </van-field>
      <!-- 占位符 -->
      <div style="height:200px;">

      </div>
    </div>

    <!--设备采集 bottom 底部按钮  -->
    <div class="bottom" v-show="tabIndex == 1">
      <button @click="connect()">连接</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AddTiZhong',
  data() {
    return {
      userid: this.$route.query.userid,
      tabIndex: 0,
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      time: '',
      datePicker: false,
      statePicker: false,
      isEdit: 1,
      choose_state: '',
      choose_state_id: '',
      stateColumns: [
        {
          text: '只穿一件内衣',
          id: 0,
        },
        {
          text: '早上刚起床',
          id: 1,
        },
        {
          text: '晚上睡觉前',
          id: 2,
        },
      ],
      // 体重信息
      height: '',
      weight: '',
      tizhilv: '',
      jiroulv: '',
      shuifen: '',
      danbaizhi: '',
      zhifang: '',
      guyanliang: '',
    }
  },
  methods: {
    // 返回首页
    home() {
      this.$router.push({
        path: '/TiZhongEChart',
        query: { userid: this.userid },
      })
    },
    // 保存按钮
    save() {
      if (this.choose_state == '') {
        this.$toast('请选择状态')
      } else if (this.time == '') {
        this.$toast('请选择时间')
      } else if (this.height == '') {
        this.$toast('请输入身高')
      } else if (this.weight == '') {
        this.$toast('请输入体重')
      } else if (this.tizhilv == '') {
        this.$toast('请输入体脂率')
      } else if (this.jiroulv == '') {
        this.$toast('请输入肌肉率')
      } else if (this.shuifen == '') {
        this.$toast('请输入身体水分')
      } else if (this.danbaizhi == '') {
        this.$toast('请输入蛋白质含量')
      } else if (this.zhifang == '') {
        this.$toast('请输入内脏脂肪等级')
      } else if (this.guyanliang == '') {
        this.$toast('请输入骨盐量')
      } else {
        this.getsaveHealthdataTZ()
      }
    },
    connect(){
      this.$toast("该功能尚在开发中")
    },
    //新增修改 体重数据
    getsaveHealthdataTZ() {
      this.$http
        .saveHealthdataTZ({
          //1位手工输入，2位设备采集
          classification: 1,
          status: this.choose_state_id,
          time: this.Common.formatDate(this.currentDate, 'yyyy/mm/dd HH:mm:ss'),
          stature: this.height,
          content: this.weight,
          bmi: this.bmi,
          body_fat: this.tizhilv,
          muscle: this.jiroulv,
          body_moisture: this.shuifen,
          protein: this.danbaizhi,
          level: this.zhifang,
          pelicometer: this.guyanliang,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('保存成功!')
          } else {
            this.$toast('保存失败!')
          }
        })
        .catch((err) => {
          console.log(err)
        })
      //测试输出值
      //console.log(this.time)
    },
    //   返回
    back() {
      this.$router.history.go(-1)
    },
    //   切换手工输入和设备采集
    clickTabBar(num) {
      this.tabIndex = num
    },
    // 测量时间
    dateOnConfirm() {
      this.time = this.Common.formatDate(this.currentDate)
      this.datePicker = false
    },
    // 选择 测量时状态
    stateOnConfirm(value) {
      this.choose_state = value.text
      this.choose_state_id = value.id
      this.statePicker = false
    },
    // 选择日期添加年月日
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return val + '日'
      } else if (type === 'hour') {
        return val + '点'
      } else if (type === 'minute') {
        return val + '分'
      }
      return val
    },
  },
  computed: {
    //   实时计算bmi数值
    bmi() {
      if (this.height && this.weight) {
        return (
          this.weight /
          (this.height / 100) /
          (this.height / 100)
        ).toFixed(2)
      } else {
        return '--'
      }
    },
  },
}
</script>
<style lang="less" scoped>
// header布局
.all {
  width: 100%;
  /*height: 100%;*/
  height: calc(100vh - 50px);
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}

//手工输入 设备采集 布局
.top {
  margin-top: 3%;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  height: 90px;
  display: flex;
  text-align: center;
}
.top-left {
  width: 50%;
  height: 100%;
  border-radius: 15px 0 0 15px;
  border: 1px solid #43c8db;
  color: #43c8db;
  background-color: white;
}
.top-right {
  width: 50%;
  height: 100%;
  border-radius: 0 15px 15px 0;
  color: #43c8db;
  background-color: white;
  border: 1px solid #43c8db;
}
.top-1 {
  height: 50%;
  margin-top: 8%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.ti_icon {
  width: 40px;
  height:40px;
}
.weixuanze {
  width: 50px;
  height: 15px;
  border-radius: 15px;
  background-color: #E5E5E5;
  color: #000;
  font-size: 11px;
}
.weixuanze2 {
  width: 50px;
  height: 15px;
  color: #43c8db;
  font-size: 11px;
}

// 被选中时的颜色变化
.selectTab {
  color: white;
  background-color: #43c8db;
}

//main 主体信息输入

// buttom 保存按钮
.bottom {
  width: 100%;
  height: 60px;
  margin-bottom: 50px;
  position: fixed;
  bottom:0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}
.bottom button {
  width: 92%;
  height: 44px;
  background: linear-gradient(90deg, #1da3f2 0%, #1dc7f2 100%);
  color: #ffffff;
  border-radius: 22px;
  border: none;
  margin: 0 10px;
}
</style>